<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mapy</title>
    <style>
            @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700,700i');
            @import url('https://fonts.googleapis.com/css?family=Bree+Serif');
    </style>
</head>
<body>
    <template id="tab-container">
        <style>
            .tabs {
                display: flex;
                flex-wrap: wrap;
                max-width: 100%;
                background: #e5e5e5;
                box-shadow: 0 48px 80px -32px rgba(0, 0, 0, 0.3);
            }

            .input {
                position: absolute;
                opacity: 0;
            }

            .label {
                width: 100%;
                padding: 10px 10px;
                background: #e5e5e5;
                cursor: pointer;
                font-weight: bold;
                font-size: 15px;
                color: #7f7f7f;
            }

            .label:hover {
                background: #d8d8d8;
            }

            .label:active {
                background: #ccc;
            }

            .input:focus+.label {
                z-index: 1;
            }

            .input:checked+.label {
                background: #fff;
                color: #000;
            }

            .label {
                width: auto;
            }

            .panel {
                display: none;
                padding: 20px 30px 30px;
                background: #fff;
            }

            .panel {
                order: 99;
            }

            .input:checked+.label+.panel {
                display: block;
            }
        </style>
        <div class="tabs">
            <input class="input" name="tabs" type="radio" id="tab-1"/>
            <label class="label" for="tab-1">Arlina Design</label>
            <div class="panel">
                <h1>Arlina Design</h1>
                <p>Arlina Design (specifically, the sweet orange) is the fruit of the citrus species Citrus × sinensis in the family Rutaceae</p>
                <p>The fruit of the Citrus × sinensis is considered a sweet orange, whereas the fruit of the Citrus × aurantium is considered a bitter orange. The sweet orange reproduces asexually (apomixis through nucellar embryony); varieties of sweet orange arise through mutations.</p>
            </div>
            <input class="input" name="tabs" type="radio" id="tab-2"/>
            <label class="label" for="tab-2">Idntheme</label>
            <div class="panel">
                <h1>Idntheme</h1>
                <p>Idntheme (Citrus tangerina) is an orange-colored citrus fruit that is closely related to, or possibly a type of, mandarin orange (Citrus reticulata).</p>
                <p>The name was first used for fruit coming from Tangier, Morocco, described as a mandarin variety. Under the Tanaka classification system, Citrus tangerina is considered a separate species.</p>
            </div>
            <input class="input" name="tabs" type="radio" id="tab-3"/>
            <label class="label" for="tab-3">Tekno Match</label>
            <div class="panel">
                <h1>Tekno Match</h1>
                <p>Tekno Match (Citrus ×clementina) is a hybrid between a mandarin orange and a sweet orange, so named in 1902. The exterior is a deep orange colour with a smooth, glossy appearance. Clementines can be separated into 7 to 14 segments. Similarly to tangerines, they tend to be easy to peel.</p>
            </div>
        </div>
    </template>

    <template id="tab-document">
        <input class="input" name="tabs" type="radio" />
        <label class="label" for="tab"></label>
        <div class="panel">
            <slot name="content"></slot>
        </div>
    </template>

    <tab-container>
    </tab-container>

    
    <script>
        customElements.define("tab-container",
            class extends HTMLElement {
                constructor () {
                    super()
                    const template = document.getElementById("tab-container").content
                    this.attachShadow({ mode: "open" }).appendChild(template.cloneNode(true))
                    const tabDocument = this.shadowRoot
                    const tabs = tabDocument.querySelectorAll("input")
                    tabs[0].checked = true
                    
                    const tabTitles = tabDocument.querySelectorAll("label")

                    const tabContents = tabDocument.querySelectorAll(".panel")
                    tabContents.forEach(tab => {
                        tab.addEventListener("keydown", e => {
                            if (e.key.toUpperCase() === "N" && e.ctrlKey) {
                                e.preventDefault()
                                // TODO: 创建新 tab
                            }
                        })
                    })
                }
            })

            customElements.define("tab-document",
                class extends HTMLElement {
                    constructor () {
                        super()
                        const template = document.getElementById("tab-document").content
                        this.attachShadow({ mode: "open" }).appendChild(template.cloneNode(true))
                    }
                })
    </script>
</body>
</html>